import * as React from 'react';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';

const PluginDemo = (ctx: IPublicModelPluginContext) => {
  return {
    // 插件对外暴露的数据和方法
    exports() {
      return {
        data: '你可以把插件的数据这样对外暴露',
        func: () => {
          console.log('方法也是一样');
        },
      };
    },
    // 插件的初始化函数，在引擎初始化之后会立刻调用
    init() {
      const { skeleton } = ctx;

      // 往引擎增加面板
      skeleton.add({
        area: 'leftArea',
        name: 'demoPane',
        type: 'PanelDock',
        props: {
          align: "left",
          icon: "wenjian",
          description: "Demo@",
        },
        panelProps: {
          floatable: true, // 是否可浮动
          height: 300,
          hideTitleBar: false,
          maxHeight: 300,
          maxWidth: 300,
          title: "JS 面板",
          width: 300,
        },
        content: <div>这是一个 Demo 面板</div>,
      });
      
      // @alilc/lowcode-plugin-manual 源码
      // skeleton.add({
      //   area: 'leftArea',
      //   name: 'manualPane',
      //   type: 'PanelDock',
      //   props: {
      //     align: 'bottom',
      //     icon: "wenjian",
      //     description: '如何使用',
      //     onClick() {
      //       window.open('https://lowcode-engine.cn/site/docs/demoUsage/intro', '_blank').focus();
      //     },
      //   },
      // });

      // ctx.logger.log('打个日志');
    },
  };
};

// 插件名，注册环境下唯一
PluginDemo.pluginName = 'demoPane';
PluginDemo.meta = {
  // 依赖的插件（插件名数组）
  dependencies: [],
  engines: {
    lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行
  },
};

export default PluginDemo;